<template>
    <div class="article-list">
    <van-pull-refresh v-model="loading1" @refresh="onRefresh" :success-text="successText" :success-duration	=1500>
    <van-list
  v-model:loading="loading"
  v-model:error="error"
  error-text="请求失败，点击重新加载"
  :finished="finished"
  finished-text="没有更多了"
  @load="onLoad"
>
<van-cell class="article-item" v-for="(item, index) in articltList" :key="index" :to="'/article/' + item.id">
    <!-- 使用 title 插槽来自定义标题 -->
    <template #title>
      <span class="title van-multi-ellipsis--l2"
        >{{ item.title }}打算大苏打实打实实打实打算打算反对法大幅度反对法</span>
    </template>
    <!-- 使用label插槽：自定义标题下方的描述信息 -->
    <template #label>  
        <div class="label-info-wrap">
        <span>{{ item.aut_name }}</span>
        <span>{{ item.comm_count }}评论</span>
        <span>{{ dayjs().to(dayjs(item.pubdate)) }}</span>
      </div>
      <div v-if="item.type === 3" class="cover-wrap">
        <div
          class="cover-item"
          v-for="(img, index) in item.images"
          :key="index"
        >
          <van-image
            fit="conver"
            :src="`${lj}` + img"
            class="cover-item-img"
          ></van-image>
        </div>
      </div>
      </template>
      <template #right-icon>
      <van-image
        v-if="item.type === 1"
        class="right-cover"
        :src="`${lj}` + item.images[0]"
        fit="cover"
    /></template>
      </van-cell>
</van-list>
</van-pull-refresh>
</div>
</template>  

<script setup>
import { reactive, toRefs, ref } from "vue"
import axios from "axios"
import { useUsersStore } from "../store/home"
import dayjs from "../uli/day"

let lj = ref(import.meta.env.VITE_APP_URL)
let store = useUsersStore()
let ress = reactive({
    articltList: [],
    loading: false,
    error: false,
    finished: false,
    pageNumber: 1,
    loading1: false,
    successText: '刷新成功'
})
let { loading, finished, articltList, error, loading1, successText } = toRefs(ress)

//请求文章数据列表
const onLoad = async () => {
    try {
        let { data } = await axios.get("/articles", { params: { channel_id: store.channelsId, pageNumber: ress.pageNumber } })
        console.log(data)
        if (Math.random() > 0.7) {
            JSON.parse("aaaa")
        }
        const result = data.list
        ress.articltList.push(...result)

        ress.loading = false
        if (result.length > 0) {
            ress.pageNumber = ress.pageNumber + 1
        } else {
            ress.finished = true
        }

    } catch (err) {
        ress.error = true
        ress.loading = false

    }

}
//下拉刷新数据
const onRefresh = async () => {
    try {
        let { data } = await axios.get("/articles", { params: { channel_id: store.channelsId, pageNumber: 1, referrer: "load", } })
        console.log(data)
        if (Math.random() > 0.7) {
            JSON.parse("aaaa")
        }
        const result = data.list
        ress.articltList.unshift(...result)
        ress.loading1 = false
        ress.successText = `刷新成功，更新了${result.length}条数据`
    } catch (err) {
        ress.loading1 = false
        ress.successText = "刷新失败"
    }

}
</script>

<style scoped>
.article-item {
    min-height: 200px;
}

.article-list {
    margin-top: 50px;
    height: 1000px;
    overflow-y: auto;
}



.article-item .title {
    font-size: 20px;
    color: #3a3a3a;
}

.article-item .van-cell__value {
    flex: unset;
    width: 232px;
    height: 146px;
    padding-left: 25px;
}

.article-item .right-cover {
    width: 132px;
    height: 146px;
}

.article-item .label-info-wrap span {
    font-size: 14px;
    color: #b4b4b4;
    margin-right: 25px;
}

.article-item .cover-wrap {
    display: flex;
}

.article-item .cover-wrap .cover-item {
    /* 平分宽度 */
    flex: 1;
    padding-right: 4px;
}
</style>                    